<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>会员注册</title>
   <link rel="stylesheet" href="register.css">
   <link rel="stylesheet" href="../../css/Untils/public.css">
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
   <div id="app">
      <div class="head-bg">
         <div class="header">
            <div class="logo clearfix">
               <div class="logocon">
                  <a href="">
                     <img src="../../img/logo/register_logo.png" alt="" title="途牛旅游网">
                  </a>
               </div>
               <p class="head_tip">欢迎注册</p>
            </div>
         </div>
      </div>

      <!-- ========内容======= -->
      <div class="allWrap">
         <div class="main_top">
            <div class="main_top_l">
               <span class="decoration"></span>
            </div>
            <div class="main_top_r">
               已有途牛帐号了？
               <a href="../admin/admin.html">登录</a>
            </div>
         </div>

         <div class="user-reg" id="user-reg">
            <div class="reg-field">
               <div class="reg_title">
                  <span>手机注册</span>
               </div>
               <div class="body_form">
                  <div class="flex_wrap">

                     <div class="msg">
                        <div v-if="!isShowMsg && !isShowTrue" style="margin: 52px 0;"></div>
                        <el-alert v-if="isShowTrue" title="操作成功！" type="success" center show-icon>
                        </el-alert>

                        <el-alert v-if="isShowMsg" title="" type="warning" @close="close" center show-icon>
                           <template slot="title">
                              {{errmsg}}
                           </template>
                        </el-alert>
                     </div>

                     <div class="flex_wrap">
                        <div class="form">
                           <ul>
                              <li class="flex">
                                 <label class="label0">账号：</label>
                                 <el-input v-model="admin" placeholder="请输入账号"></el-input>
                              </li>
                              <li class="flex">
                                 <label class="label0">密码：</label>
                                 <el-input v-model="password" placeholder="请输入密码" type="password"></el-input>
                              </li>
                              <li class="flex">
                                 <label class="label0">昵称：</label>
                                 <el-input v-model="nickName" placeholder="请输入昵称"></el-input>
                              </li>
                              <li class="flex">
                                 <label class="label1">手机号码：</label>
                                 <el-input v-model="phone" placeholder="请输入手机号码" style="margin-left:-24px"></el-input>
                              </li>
                              <li class="flex">
                                 <label class="label2">验证码：</label>
                                 <el-input v-model="code" placeholder="请输入验证码" style="width:auto;margin-left:-15px"></el-input>
                                 <a href="javascript:void(0)" style="margin-left: 20px;margin-top:19px" @click="getPhoneCode">发送验证码</a>
                              </li>
                              <li class="flex">
                                 <label class="label2" style="margin-left: -0px;">出生日期:</label>
                                 <div class="block" style="margin-left: 2px;">
                                    <el-date-picker v-model="birthday" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                 </div>
                              </li>
                              <li class="flex">
                                 <label class="label2">性别：</label>
                                 <el-select v-model="sex" placeholder="请选择性别" style="margin-left:-10px">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value">
                                    </el-option>
                                 </el-select>
                              </li>
                              <li class="flex">
                                 <label class="label2">邮箱：</label>
                                 <el-input v-model="email" placeholder="请输入邮箱"></el-input>
                              </li>
                              <!-- <li class="flex">
                                 <label class="label2">地址：</label>
                                 <el-input v-model="arrdess" placeholder="请输入地址"></el-input>
                              </li> -->

                           </ul>
                        </div>

                        <div id="accept">
                           <el-checkbox v-model="checked"></el-checkbox>
                           <div class="accept_font_common">同意</div>
                           <a href="" class="accept_font">途牛用户协议</a>
                           <div class="accept_font_common">和</div>
                           <a href="" class="accept_font">途牛隐私政策</a>
                           <div class="accept_font_common">并且愿意接受旅游咨询免费信息 </div>
                        </div>
                     </div>

                     <div class="btn">
                        <el-button v-if="!checked" type="info" class="resgiter">下一步</el-button>
                        <el-button v-else="checked" type="success" class="resgiter" @click="next">下一步</el-button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!--引入vue与element-ui-->
   <script src="../../js/untils/vue.js"></script>
   <!-- 引入组件库 -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script src="../../js/untils/axios-0.18.0.js"></script>
   <script>
      new Vue({
         el: "#app",
         // 数据变量
         data() {
            return {
               admin: "", // 账号
               nickName: "", // 昵称
               password: "", // 密码
               phone_head: "中国0086", // 手机号码前缀
               phone: "", // 手机号码
               code: "", // 验证码
               birthday: "", // 出生日期
               sex: '', // 性别
               email: "", // 邮箱
               address: "", // 地址
               userHeadPortrait: "", // 头像

               checked: false, // 是否选中协议
               errmsg: "", // 操作失误提示信息
               isShowMsg: false, // 是否展示错误提示信息
               isShowTrue: false, // 是否展示成操作功消息

               options: [{
                  value: 'M',
                  label: '男'
               }, {
                  value: 'W',
                  label: '女'
               }],
            }
         },
         // 方法
         methods: {
            // 下一步按钮
            next() {
               // 是否为空校验
               this.isShowMsg = true
               if (this.isEmpty(this.admin)) {
                  this.errmsg = "账号不能为空！"
                  return
               }

               if (this.isEmpty(this.password)) {
                  this.errmsg = "密码不能为空！"
                  return
               }
               if (this.isEmpty(this.nickName)) {
                  this.errmsg = "昵称不能为空！"
                  return
               }

               if (this.isEmpty(this.phone)) {
                  this.errmsg = "手机号码不能为空！"
                  return
               }

               if (this.isEmpty(this.code)) {
                  this.errmsg = "验证码不能为空！"
                  return
               }

               if (this.isEmpty(this.birthday)) {
                  this.errmsg = "出生日期不能为空！"
                  return
               }

               // 格式校验
               if ((/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im).test(this.admin)) {
                  this.errmsg = "账号有特殊字符！"
                  return
               } else {
                  if (this.password.length < 6) {
                     this.errmsg = "密码长度不能小于6！"
                     return
                  } else {
                     if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/).test(this.phone)) {
                        this.errmsg = "号码格式不正确！"
                        return
                     } else {
                        this.isShowMsg = false;
                        this.isShowTrue = true;
                        this.register()
                     }
                  }
               }
            },

            // 判断是否为空
            isEmpty(str) {
               if (str == null || str == '') return true;
               return false;
            },

            close() {
               this.isShowMsg = false;
               this.isShowTrue = false;
            },

            // 注册
            register() {
               var that = this
               var temp = {
                  userAdmin: that.admin,
                  userNickName: that.nickName,
                  userPasssword: that.password,
                  userPhone: that.phone,
                  birthday: that.birthday,
                  sex: that.sex,
                  email: that.email,
                  address: that.address,
                  userHeadPortrait: '',
                  standby01: that.admin,
                  standby02: ''
               }
               axios({
                  method: 'post',
                  url: 'http://localhost:8080/customerUser/userRegister',
                  data: temp
               }).then(function (resp) {
                  console.log(resp)
                  if (resp.data.code == 200) window.location.href = "../admin/admin.html"
                  else that.errmsg = resp.data.msg

               })
            },


            // 获取验证码
            getPhoneCode() {
               var that = this
               var phone = that.phone
               axios({
                  method: "post",
                  url: "http://localhost:8080/customerUser/getPhoneCode" + "?phone=" + phone
               }).then(function (resp) {
                  console.log(resp)
                  that.code = resp.data.data
               })
            },
         }
      })
   </script>

</body>

</html>